<template>
  <div class="musician">
    <div class="container">
      <div class="wrapper-contain">
        <div class="wrapper-left">
          <MouseWrap :background="'#999'" :coverBackground="'rgba(0,0,0,0.3)'">
            <template v-slot:content>
              <div>
                <ImgLazy :url="require(`@/assets/images/a.jpg`)" />
              </div>
            </template>
          </MouseWrap>
        </div>
        <div class="wrapper-items">
          <div class="item-column" v-for="(item, index) in data" :key="index">
            <MouseWrap
              :width="'200px'"
              :height="'200px'"
              :background="'#999'"
              :coverBackground="''"
            >
              <template v-slot:cover>
                <div>
                  <PlayButton
                    :duration="1000"
                    :width="'70px'"
                    :height="'70px'"
                  ></PlayButton>
                </div>
              </template>

              <template v-slot:content>
                <div class="items-content-title">
                  {{ item.music_name }}
                </div>
                <div class="items-content">
                  <ImgLazy :url="item.imgsrc" />
                </div>
              </template>
            </MouseWrap>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="item-contain" v-for="(item,index) in MusicianData" :key="index">
      <AlbumItem :data="item" :isPlay="true" :isDetaile="false"></AlbumItem>
    </div> -->
  </div>
</template>

<script>
// import AlbumItem from "../AlbumItem";
import MouseWrap from "@/components/Plugin/MouseWrap";
import MusicianData from "@/data/home/Musician.js";
export default {
  name: "Musician",
  components: {
    // AlbumItem,
    MouseWrap,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  setup() {
    return {
      MusicianData,
    };
  },
};
</script>

<style lang="scss" scoped>
.musician {
  .item-contain {
    width: 16.6%;
    float: left;
    overflow: hidden;
  }
  .wrapper-contain {
    position: relative;
    padding-right: 300px;
    .wrapper-left {
      width: 300px;
      height: 433px;
      padding: 6px;
      position: absolute;
      right: 0;
      top: 0px;
      box-sizing: border-box;
      background: linear-gradient(30deg, #febccf, #bc81fe);
    }
    .wrapper-items {
      margin: 0 !important;
      height: 440px;
      overflow: hidden;
      .item-column {
        float: left;
        margin: 10px;
        border-radius: 10px;
        overflow: hidden;

        &:hover {
          .items-content {
            transform: scale(1.2);
          }
        }

        .items-content-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;
          position: absolute;
          width: 105px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          color: #fff;
          background-color: rgba(254, 89, 135, 0.7);
          top: 0px;
          left: 0;
          z-index: 1;
          border-radius: 4px 0 10px 4px;
        }
        .items-content {
          transition: all 0.5s;
        }
      }
    }
  }
}
</style>